<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>定位</title>
  <style>
    .super-div {
      width: 960px;
      height: 1000px;
      margin: 0 auto;
      background-color: gainsboro;
      position: relative;
    }

    .relative-div {
      /* relative 相对定位，相对于定位之前的位置 */
      position: relative;
      left: 10px;
      top: 20px;
      width: 100px;
      height: 100px;
      background-color: goldenrod;
    }

    .absulote-div {
      /* absolute 绝对定位，位置偏移相对于祖先元素中倒数第一个开启定位的元素，如果都没有开启定位，偏移相对于body */
      position: absolute;
      left: 200px;
      /* absolute 默认为0 */
      top: 200px;
      /* absolute 默认为0 */
      width: 100px;
      height: 100px;
      background-color: blue;
    }

    .fixed-div {
      /* fixed 固定定位，位置偏移相对于视口 */
      /* 右下角 ↓ */
      position: fixed;
      bottom: 100px;
      right: 300px;
      width: 60px;
      height: 60px;
      background-color: crimson;
    }
  </style>
</head>

<body>
  <div class="super-div">
    <div class="relative-div"></div>
    <div class="absulote-div"></div>
    <div class="fixed-div"></div>
  </div>
</body>
</body>

</html>